<template>
  <div class="container">
    <div id="map"></div>
    <div class="charts">
      <div class="stationStatistics">
        <div class="title">站点统计</div>
        <div class="detail">
          <div class="quantity">
            <div class="station">
              <p class="num">{{ stationCount }}</p>
              <p class="name">站点数量</p>
            </div>
            <div class="transformer">
              <p class="num">{{ deviceCount }}</p>
              <p class="name">设备数量</p>
            </div>
          </div>
          <!-- 饼图 -->
          <div class="error" id="errorProportion"></div>
          <!-- 占比值 -->
          <div class="circle">
            <div class="errorNum">
              <p class="text">故障率</p>
              <span class="num">{{ faultRate }}</span>
              <span>%</span>
            </div>
          </div>
        </div>
      </div>
      <div class="errorStatistics">
        <div class="title">月度异常统计</div>
        <!-- 故障统计折线图 -->
        <div class="line"></div>
      </div>
      <div class="errorRank">
        <div class="title">异常排名</div>
        <div class="error" id="errorRank"></div>
        <div class="rank">
          <div class="rank1">
            <div class="errorName" :title="this.exceptionGroupX.length>0?this.exceptionGroupX[0]:''">#{{ this.exceptionGroupX.length>0?this.exceptionGroupX[0]:'' }}</div>
            <div class="errorDetail">
              <p class="mun">{{ this.exceptionGroupY.length>0?this.exceptionGroupY[0]:'' }}</p>
              <p>数量</p>
            </div>
          </div>
          <div class="rank2" v-if="this.exceptionGroupY.length>1">
            <div class="errorName" :title="this.exceptionGroupX.length>1?this.exceptionGroupX[1]:''">#{{ this.exceptionGroupX.length>1?this.exceptionGroupX[1]:'' }}</div>
            <div class="errorDetail">
              <p class="mun">{{ this.exceptionGroupY.length>1?this.exceptionGroupY[1]:'' }}</p>
              <p>数量</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { citys } from '../../../assets/js/point.js'
  import * as echarts from 'echarts'
  import { list } from '../../../api/modular/main/bizstation/bizStationManage'
  import { getCountByStationIds } from '@/api/modular/main/bizdevice/bizDeviceManage'
  import {
    getAllExceptionGroup,
    getAllListById,
    getErrorCountByMonth,
    getExceptionStatus,
    getFaultRate
  } from '@/api/modular/system/indexManage'
  import 'echarts-extension-amap'

  let myMap
  let myPie
  let myLine
  let myHis
  export default {
    data: function () {
      return {
        stationList: [],
        stationCount: 0,
        deviceCount: 0,
        unprocessed: 0,
        processed: 0,
        allMonthErrorList: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        exceptionGroupX: [],
        exceptionGroupY: [],
        faultRate: 0
      }
    },
    methods: {
      // 地图
      initMap () {
        const mymap = document.querySelector('#map')
        myMap = echarts.init(mymap, null, { renderer: 'svg' })
        require('../../../assets/js/china.js')
      },
      updateMap () {
        const that = this

        const option = {
          backgroundColor: '#0e1f21',
          geo: {
            map: 'china',
            roam: false,
            zoom: 1.4,
            label: {
              normal: {
                show: true, // 是否显示省份名
                fontSize: '12',
                color: '#fff'
              },
              emphasis: {
                show: true,
                fontSize: '12',
                color: '#fff'
              }
            },
            itemStyle: {
              normal: {
                areaColor: '#132d30',
                borderColor: '#132d30',
                borderWidth: 1
              },
              emphasis: {
                // areaColor: '#323c48',
                areaColor: '#132d30',
                // areaColor: 'transparent',
                borderWidth: 1,
                borderColor: '#132d30'
              }
            }
          },
          series: [
            // 散点数据
            {
              type: 'scatter',
              coordinateSystem: 'geo',
              itemStyle: {
                color: '#9f9a5f'
              },
              symbolSize: 1,
              postEffect: {
                enable: true
              },
              data: citys
            },
            // marker点数据
            {
              // type: 'effectScatter',
              type: 'scatter',
              coordinateSystem: 'geo',
              // 标记点坐标
              data: this.stationList,
              // 自定义图片大小
              symbolSize: [25, 25],
              // 自定义图片的 路径
              // symbol: 'image://~@/assets/img/icon1.png'
              symbol: `image://${require('../../../assets/img/mark.png')}`,
              label: {
                normal: {
                  show: false,
                  position: 'top',
                  formatter: function (params) {
                    return params.name
                  },
                  // width: 160,
                  height: 24,
                  lineHight: 1,
                  borderColor: 'transparent',
                  borderWidth: 1,
                  // backgroundColor: 'rgba(0,0,0,.5)',
                  borderRadius: 15,
                  color: '#00ffff',
                  fontSize: 14
                },
                emphasis: {
                  show: true,
                  position: 'top',
                  formatter: function (params) {
                    return params.name
                  }
                }
              }
            }
          ]
        }
        myMap.setOption(option)
        myMap.on('click', function (params) {
          if (params.componentType === 'series') {
            const data = params.data
            const stationId = data.stationId
            getAllListById({ stationId: stationId }).then((res) => {
              if (Object.keys(res.device).length > 1) {
                that.$router.push({
                  path: '/stationDetail', query: { stationId: res.stationId }
                })
              } else if (Object.keys(res.device).length === 1) {
                const device = Object.values(res.device)
                that.$router.push({
                  path: '/detail', query: { stationId: res.stationId, id: device[0].deviceId }
                })
              } else {
                that.$message.warning('该电站未添加设备')
              }
            })
          }
        })
      },
      // 饼图
      initPie () {
        const mypie = document.querySelector('#errorProportion')
        myPie = echarts.init(mypie, null, { renderer: 'svg' })
      },
      updatePie () {
        const option = {
          tooltip: {
            trigger: 'item'
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['60%', '76%'],
              itemStyle: {
                borderRadius: 0,
                borderColor: '#0e292c',
                borderWidth: 5
              },
              avoidLabelOverlap: false,
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              data: [
                {
                  value: this.unprocessed,
                  name: '未处理故障',
                  itemStyle: {
                    // color: '#2EADD9'
                    color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
                      { offset: 0, color: '#30DCD2' },
                      { offset: 0.3, color: '#2FC1D6' },
                      { offset: 0.6, color: '#2C89DF' },
                      { offset: 1, color: '#2EAFD9' }
                    ])
                  }
                },
                {
                  value: this.processed,
                  name: '已处理故障',
                  itemStyle: {
                    // color: '#FFB866'
                    color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
                      { offset: 0, color: '#FD3F50' },
                      { offset: 0.3, color: '#FE7359' },
                      { offset: 0.6, color: '#FFB165' },
                      { offset: 1, color: '#FFB866' }
                    ])
                  }
                }
              ]
            }
          ]
        }
        option && myPie.setOption(option)
      },
      // 折线图
      initLine () {
        const myline = document.querySelector('.line')
        myLine = echarts.init(myline, null, { renderer: 'svg' })
      },
      updateLine () {
        getErrorCountByMonth().then(res => {
          if (res.success) {
            for (let i = 0; i < res.data.length; i++) {
              this.allMonthErrorList[res.data[i].monthDay - 1] = res.data[i].errCount
              const option = {
                tooltip: {
                  trigger: 'axis'
                },
                grid: {
                  top: '14%',
                  left: '18%',
                  right: '10%',
                  bottom: '24%'
                },
                xAxis: [
                  {
                    show: true,
                    data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
                    type: 'category',
                    boundaryGap: false,
                    axisLine: {
                      show: false,
                      lineStyle: {
                        color: '#fff',
                        width: 1
                      }
                    },
                    axisLabel: {
                      fontSize: 12
                    },
                    // 竖线线
                    splitLine: {
                      show: false
                    }
                  }
                ],
                yAxis: [
                  {
                    show: true,
                    type: 'value',
                    lineStyle: {
                      show: false,
                      color: '#fff'
                    },
                    // 横线
                    splitLine: {
                      show: true,
                      lineStyle: {
                        color: '#0c2e36',
                        type: 'dashed'
                      }
                    },
                    axisLine: {
                      lineStyle: {
                        show: true,
                        color: '#fff',
                        width: 1
                      }
                    },
                    axisLabel: {
                      fontSize: 12
                    }
                  }
                ],
                series: [
                  {
                    type: 'line',
                    symbolSize: 0,
                    smooth: true,
                    lineStyle: {
                      color: '#0D5F5A'
                    },
                    areaStyle: {
                      color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
                        { offset: 0, color: '#101818' },
                        { offset: 0.3, color: '#0F2726' },
                        { offset: 0.6, color: '#0F4442' },
                        { offset: 1, color: '#0D5F5A' }
                      ])
                    },
                    data: this.allMonthErrorList
                  }
                ]
              }
              myLine.setOption(option)
            }
          }
        })
      },
      initHis () {
        const myhis = document.querySelector('#errorRank')
        myHis = echarts.init(myhis, null, { renderer: 'svg' })
      },
      updateHis () {
        const option = {
          legend: {
            show: false
          },
          grid: {
            top: 10,
            left: 94,
            right: 44,
            bottom: 11,
            containLabel: false
          },
          xAxis: {
            show: false
          },
          yAxis: {
            show: true,
            type: 'category',
            data: this.exceptionGroupX,
            axisLine: {
              show: false,
              lineStyle: {
                color: '#fff'
              }
            },
            axisTick: {
              show: false
            }
          },
          series: [
            {
              type: 'bar',
              data: this.exceptionGroupY,
              label: {
                show: true,
                position: 'right',
                textStyle: {
                  color: '#fff',
                  fontWeight: 'normal'
                }
              },
              barWidth: '24%',
              showBackground: true,
              backgroundStyle: {
                color: '#0d3038',
                borderRadius: 0
              },
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                  { offset: 0, color: '#3FEEFC' },
                  { offset: 0.3, color: '#72BBCE' },
                  { offset: 0.6, color: '#B37691' },
                  { offset: 1, color: '#FA2A4E' }
                ]),
                borderRadius: 5
              }
            }
          ]
        }
        option && myHis.setOption(option)
      },
      getStationList () {
        list().then((res) => {
          this.stationCount = res.data.length
          const stationIds = []
          for (let i = 0; i < res.data.length; i++) {
            const lat = parseFloat(res.data[i].stationLatitude)
            const lgt = parseFloat(res.data[i].stationLongitude)
            const val = [lgt, lat]
            this.stationList[i] = {
              value: val,
              stationId: res.data[i].id,
              stationAddress: res.data[i].stationAddress,
              name: res.data[i].stationName
            }
            stationIds.push(res.data[i].id)
          }
          this.updateMap()

          this.getDeviceList(stationIds.toString())
        })
      },
      getDeviceList (stationId) {
        getCountByStationIds({ stationIds: stationId }).then((res) => {
          this.deviceCount = res.data
        })
      },
      getStatusCount () {
        getExceptionStatus().then(res => {
          this.unprocessed = res.unprocessed
          this.processed = res.processed
        })
        getAllExceptionGroup().then(res => {
          if (res.success) {
            this.exceptionGroupX = res.data.exceptionGroupX
            this.exceptionGroupY = res.data.exceptionGroupY
            this.updateHis()
          }
        })
        getFaultRate().then(res => {
          this.faultRate = res.data
          if (res.data > 100) {
            this.faultRate = 100
          }
        })
      }
    },
    mounted () {
      this.initMap()
      this.getStationList()
      this.initPie()
      this.updatePie()
      this.initLine()
      this.updateLine()
      this.initHis()
      this.getStatusCount()
      window.onresize = () => {
        return (() => {
          myMap.resize()
          myPie.resize()
          myLine.resize()
          myHis.resize()
        })()
      }
    }
  }
</script>

<style scoped="scoped" lang="scss">
  @import '../../../assets/scss/shouye.scss';
</style>
